<template>
  <div>
    <div class="nav">
      <div class="search" @click="search">
        <van-search v-model="searchVal" shape="round" background="#1989fa" placeholder="搜索新闻" />
      </div>
      <div class="user" @click="login">
        <!-- <span class="iconfont iconwode"></span> -->
        <van-image round width="100%" height="100%" :src="headImg" />
      </div>
    </div>

    <div class="header">
      <!-- 展开图标 -->
      <van-icon class="wap-nav" name="wap-nav" @click="section" />
      <!-- <van-icon class="arrow-down" name="arrow-down" /> -->
      <van-tabs v-model="active" color="#1989fa" sticky swipeable title-active-color="#1989fa">
        <van-tab v-for="item in navList" :key="item.id" :title="item.name">
          <!-- 加载文章 -->
          <van-list
            v-model="item.loading"
            :finished="item.finished"
            finished-text="没有更多了"
            @load="onLoad"
            :immediate-check="false"
          >
            <Article :postData="post" v-for="post in item.postList" :key="post.id" />
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Article from '../components/Article'

export default {
  components: {
    Article
  },
  data() {
    return {
      //是否加载
      loading: false,
      //数据全部加载完成
      finished: false,
      active: 0,
      searchVal: '',
      //头像
      headImg: '',
      navList: [],
      articleList: [],
      categoryId: 0
    }
  },
  created() {
    this.getHeadImg()
    this.getNavList()
  },
  methods: {
    //加载事件
    onLoad() {
      // console.log('加载下一页')
      this.navList[this.active].pageIndex += 1
      this.getArticleList()
    },
    search() {
      this.$router.push('/search')
    },
    login() {
      this.$router.push('/user')
    },
    section() {
      this.$router.push('/section')
    },
    //获取头像
    async getHeadImg() {
      const { data: res } = await this.$http.get(
        '/user/' + localStorage.getItem('userId')
      )
      this.headImg = this.$http.defaults.baseURL + res.data.head_img
    },
    //获取栏目列表
    async getNavList() {
      const { data: res } = await this.$http.get('/category')
      console.log(res)
      let newData = JSON.parse(localStorage.getItem('delList')) ? JSON.parse(localStorage.getItem('delList')) : res.data
      // const newData = res.data.map(item => {
        newData = newData.map(item => {
          return {
            ...item,
            postList: [],
            pageIndex: 1,
            pageSize: 5,
            loading: false,
            finished: false
          }
        })
      
      this.navList = newData

      //先获取栏目再获取文章
      this.getArticleList()
    },
    //获取所有文章
    async getArticleList() {
      // console.log('获取所有文章')
      //当前栏目
      const item = this.navList[this.active]
      // console.log(item)
      const { data: res } = await this.$http.get('/post', {
        params: {
          category: this.cateId,
          pageIndex: item.pageIndex,
          pageSize: item.pageSize
        }
      })
      //获取文章成功
      const newData = [...item.postList, ...res.data]
      console.log(res.data)
      //再次触发加载下一页
      item.loading = false

      //返回的数据小于条数，就没有数据了，结束加载
      if (res.data.length < item.pageSize) {
        item.finished = true
      }
      item.postList = newData
    }
  },
  watch: {
    active() {
      const length = this.navList[this.active].postList.length
      if (length === 0) {
        this.getArticleList()
      }
    }
  },
  computed: {
    cateId() {
      return this.navList[this.active].id
    }
  }
}
</script>

<style lang="less" scoped>
.nav {
  height: 13.889vw;
  background: #1989fa;
  display: flex;
  justify-content: space-between;
  // padding: 0 2.778vw;
  .search {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    .van-search {
      width: 100%;
      height: 100%;
    }
    span {
      position: absolute;
      left: 2.222vw;
      font-size: 5vw;
    }
    input {
      height: 11.111vw;
      border: none;
      outline: none;
      width: 100%;
      padding: 0 8.333vw;
      font-size: 3.889vw;
      border-radius: 1.667vw;
    }
  }
  .user {
    align-self: center;
    width: 11.111vw;
    height: 9.722vw;
    text-align: center;
    line-height: 8.333vw;
    margin-right: 4.167vw;
    span {
      font-size: 6.944vw;
      color: #fff;
    }
  }
}

.header {
  height: 11.111vw;
  line-height: 11.111vw;
  border-bottom: 0.556vw solid #eee;
  position: relative;
}
// 展开图标
.wap-nav {
  position: absolute;
  right: 0;
  z-index: 999;
  width: 11.667vw;
  height: 11.111vw;
  line-height: 11.111vw;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  font-size: 6.111vw;
  font-weight: 300;
}
</style>